<template>
  <v-container fluid grid-list-md>
    <v-layout vertical wrap>
      <v-flex xs12 md12>品类库存报表报表</v-flex>
    </v-layout>

    <v-layout vertical wrap>
      <v-flex xs12 md12>
        <v-card>
          <v-card-title class="px2">
            <v-layout horizontal>
              <v-flex xs4 md4>
                <el-date-picker
                  v-model="validityTermStart"
                  type="date"
                  placeholder="选择开始时间"
                  value-format="yyyy-MM-dd"
                  style="width:100%;margin-right:10px;"
                ></el-date-picker>
              </v-flex>
              <v-flex xs4 md4 v-if="false">
                <el-select style="width:100%;margin-right:20px;" />
              </v-flex>
              <v-flex xs4 md4 v-if="false">
                <el-select style="width:100%;margin-right:10px;" />
              </v-flex>
              <v-flex xs4 md4>
                <el-button @click="click">查询</el-button>
              </v-flex>
            </v-layout>
          </v-card-title>
          <v-card-text class="px2">
            <div ref="pie" style="width:50em;height:50em"></div>
          </v-card-text>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
// 引入 ECharts 主模块
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/title");
import "echarts/lib/component/toolbox";
import "echarts/lib/component/tooltip";

export default {
  name: "cateStockReport",
  data() {
    return {
      validityTermStart: "",
      data: [].sort(function(a, b) {
        return a.value - b.value;
      })
    };
  },
  mounted() {
    this.$nextTick(() => {
      const pie = echarts.init(this.$refs.pie);
    });
    let now = new Date();
    if (this.validityTermStart === "") {
      this.validityTermStart =
        now.getFullYear() +
        "-" +
        (now.getMonth() + 1) +
        "-" +
        (now.getDate() - 1);
    }
  },
  methods: {
    click() {
      console.info(this.validityTermStart);

      this.$http
        .get("/item/report/plkucn", { params: { rq: this.validityTermStart } })
        .then(resp => {
          // console.log(resp);

          const pie = echarts.init(this.$refs.pie);

          this.data = resp.data;
          pie.setOption({
            title: {
              text: "库存占比"
            },
            legend: {
              data: this.data
            },
            tooltip: { show: true },
            series: [
              {
                name: "库存占比",
                type: "pie",
                radius: "55%",
                center: ["40%", "40%"],
                data: this.data,
                label: {
                  normal: {
                    formatter: "{d}% \n{b}",
                  }
                }
              }
            ],
            itemStyle: {
              emphasis: {
                // 阴影的大小
                shadowBlur: 200,
                // 阴影水平方向上的偏移
                shadowOffsetX: 0,
                // 阴影垂直方向上的偏移
                shadowOffsetY: 0,
                // 阴影颜色
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          });

          pie.hideLoading();
        })
        .catch();
    }
  }
};
</script>

<style scoped>
</style>
